<template>
	<view class="wenjuan" :id="myid" :data-index='myIndex'>
		<uni-title v-if="title.length > 0" :title="myIndex+title+(isMustAnswer()?'*':'')" :color="titleColor" type="h1"></uni-title>
		<template v-if="showType">
			<uni-tag :text="myTypeLable" :style="{width: myTypeLable.length * 14+'px'}"
			 style="margin-bottom: 10px;"
			 type="error" :circle="true" size="small"></uni-tag>
		</template>
		<slot name="beforeContent"></slot>
		<view v-if="subTitle && subTitle.length > 0" :style="{color: subTitleColor}" class="subTitle">{{subTitle}}</view>
		<view v-if="type == 'input'" class="subjectBody">
			<view class="uni-easyinput__content" v-if="inputType === 'date'">
				<view class="uni-easyinput__content is-input-border" style="padding-left: 10px; font-size: 14px;"
				 @click="openCalender()">
				    <view v-if="value">{{value.fulldate}}</view>
				    <view v-else style="color: grey;">{{placeholder}}</view>
				</view>
				<uni-calendar ref="calender" :insert="false" :clearDate="false" 
				 @confirm="valueChange($event, true)"></uni-calendar>
			</view>
			<view class="uni-easyinput__content" v-else-if="inputType === 'time'">
				<picker mode="time" class="uni-easyinput__content is-input-border" style="padding-left: 10px; font-size: 14px;"
				 :value="value" @change="valueChange($event.detail.value, true)">
				    <view v-if="typeof(value) === 'string' && value.length > 0">{{value}}</view>
				    <view v-else style="color: grey;">{{placeholder}}</view>
				</picker>
			</view>
			<view class="uni-easyinput__content is-input-border" v-else-if="inputType === 'location'">
				<view style="padding-left: 10px; font-size: 14px; width: 100%;"
				 @tap="getLocation()">
					<view v-if="typeof(value) === 'string' && value.length > 0">{{value}}</view>
					<view v-else style="color: grey;">{{placeholder}}</view>
				</view>
			</view>
			<view class="uni-easyinput__content is-input-border" v-else-if="inputType === 'drive'">
				<div @tap="openDrivePopup" style="padding-left: 10px; text-align: center;">
					{{selectDriveProvince?driveProvince[selectDriveProvince]:'--'}}</div>
				<uni-popup ref="driver_popup" type="bottom">
					<view class="uni-popup-share">
						<view class="uni-share-title"><text class="uni-share-title-text">请选择省</text></view>
						<view class="uni-share-content">
							<view class="uni-share-content-box">
								<uni-data-checkbox v-model="selectDriveProvince"
								 :multiple="false" :localdata="getDriveProvince()"
								 ></uni-data-checkbox>
							</view>
						</view>
						<view class="uni-share-button-box">
							<!-- <button class="uni-share-button-close" @click="closeDrivePopup">取消</button> -->
							<button class="uni-share-button-close" @click="closeDrivePopup">确定</button>
						</view>
					</view>
				</uni-popup>
				<view style="padding-left: 10px; padding-right: 10px;">·</view>
				<input :placeholder="placeholder" class="uni-easyinput__content-input" v-model="value" 
				 @input="stopInputNotNumORChar" :maxlength="7"/>
			</view>
			<uni-easyinput v-else v-model="value" :placeholder="placeholder" :maxlength="maxlength"
			 :type="inputType==='autoHeight'?'textarea':inputType" trim="both" :clearable="true"
			 :autoHeight="inputType==='autoHeight'?true:false" @input="valueChange"></uni-easyinput>
		</view>
		<view v-else-if="type == 'select'" class="subjectBody">
			<radio-group v-if="maxSelect === 1" :class="float?'placeFloat':'placeInCol'">
				<radio v-for="(selectItem,i) in selectList" :key="myid+'-'+i" class="subTitle"
				 @click="valueChange({index:i, label:selectItem}, true)">
					{{selectItem}}
					<slot :name="'selectitem-'+i"></slot>
				</radio>
				<radio v-if="hasOther" class="subTitle"
				 @click="valueChange({index:selectList.length, label:otherValue}, true)">
					<uni-easyinput type="text" maxlength="200" placeholder="其他" v-model="otherValue"
					 @input="valueChange({index:selectList.length, label:otherValue}, true)"
					 ></uni-easyinput>
				</radio>
			</radio-group>
			<checkbox-group v-else-if="maxSelect > 1" :class="float?'placeFloat':'placeInCol'">
				<checkbox v-for="(selectItem,i) in selectList" :key="myid+'-'+i" class="subTitle" 
				 @click="multiSelectClick(i)" :checked="multiSelectResultList[i]"
				 :disabled="value !== null && value.length === maxSelect && !multiSelectResultList[i]"
				 >
					{{selectItem}}
					<slot :name="'selectitem-'+i"></slot>
				</checkbox>
				<checkbox v-if="hasOther" class="subTitle"
				 :disabled="value !== null && value.length === maxSelect && !multiSelectResultList[multiSelectResultList.length - 1]"
				 @click="multiSelectClick(multiSelectResultList.length - 1)" 
				 :checked="multiSelectResultList[multiSelectResultList.length - 1]"
				 >
					<uni-easyinput type="text" maxlength="200" placeholder="其他" v-model="otherValue"
					 @input="multiSelectClick(multiSelectResultList.length - 1, true)"
					 ></uni-easyinput>
				</checkbox>
				<uni-popup ref="multiselect_popup" type="message">
				    <uni-popup-message type="error" message="已达到选择上限" :duration="2000"></uni-popup-message>
				</uni-popup>
			</checkbox-group>
		</view>
		<view v-else-if="type=='picker' && pickerData" class="subjectBody">
			<uni-data-picker :placeholder="placeholder" :popup-title="placeholder" 
			 :localdata="myLocalJSON" @change="valueChange($event.detail.value, true)"></uni-data-picker>
		</view>
		<slot></slot>
	</view>
</template>

<script>
	/**
	 * gwh 简单问卷第二弹
	 * @description 简单问卷第二版本，警告：该组件需要uni-ui为前置。如若用户不愿下载uni-ui，也可使用点单问卷第一代
	 * @tutorial 
	 * @property {String} id 用户自定义题目ID，不填自动初始化（不要重复，会引发值冲突）
	 * @property {String} type = [none|input|select|picker] 题目类型
	 * @property {Boolean} showType 是否开启对题型的标注，默认true开启
	 *  @value none 无
	 *  @value input 输入题
	 * 	@value select 选择题
	 *  @value picker 级联选择题
	 * @property {String} autoIndex = [none|same|parent|parent-n|child|new] 是否开启自动编号功能，默认none
	 *  @value none 对当前题目不开启
	 *  @value same 继承上一题目的同级编号，如在1后继承2
	 *  @value parent 继承上一题目的父级编号，如在1.1后继承2
	 *  @value parent-n 继承上一题目的父n级编号，如n=2则在1.1.1后继承2或在1.1.1.1.后继承1.2.
	 *  @value child 继承上一题目的子级编号，如在1后继承1.1
	 *  @value new 重启编号，本题为1号
	 * @property {Number} autoIndexFreshTime 编号刷新时间（ms），默认500ms 
	 * @property {String} title 问卷题目标题
	 * @property {String} titleColor 题目颜色，初始为#027fff
	 * @property {String} subTitle 副标题，初始为空 
	 * @property {String} subTitleColor 副标题颜色，初始为#363636
	 * @property {Boolean} mustAnswer = [true|false] 是否必答（这个是样式，并不能够直接判定没答），初始非必须-false 
	 *  @value true 必答
	 *  @value false 非必答
	 * @property {String} placeholder 当type为input或picker时，占位文字
	 * @property {String} inputType = [text|textarea|password|number|idcard|digit|autoHeight|date|time|drive|location] 当type=input时：根据uni-ui官方关于uni-easyinput的type设置
	 *  @value text 文本输入键盘
	 *  @value textarea 多行文本输入
	 *  @value password 密码输入
	 *  @value number 数字输入
	 *  @value idcard 身份证输入
	 *  @value digit 小数点输入
	 *  @value autoHeight 可变多行文本输入
	 *  @value date 日期输入
	 *  @value time 时间输入
	 *  @value drive 车牌输入 
	 *  @value location 自动获取本地位置
	 * @property {Number} maxlength 当type为input时，最大长度限制，默认-1，即无限制
	 * @property {Array} selectList 当type为select时，设置各个选项的文字描述 
	 * @property {Number} maxSelect 当type为select时，设置最多可选个数，1时为单选
	 * @property {Boolean} hasOther 当type为select时，是否设置其他选项，默认false
	 * @property {Boolean} float 当type为select时，设置选项浮动分布，默认false 
	 * @property {Boolean} showReachMaxSelectMessage 当type为select且maxSelect>1时，用户选择多于maxSelect时，是否弹出警告信息，默认false 
	 * @property {String} pickerType = [default|province|country|university|work|subjects] 当type为picker时，设置预制题目类型， 默认default
	 *  @value default 用户定义
	 *  @value province 预设省市区三联
	 *  @value country 预设国家选取
	 *  @value university 预设大学选取
	 *  @value work 预设工作行业选取
	 *  @value subjects 预设本科学科三联，参考[中国学位教育网](http://www.cdgdc.edu.cn/xwyyjsjyxx/sy/glmd/264462.shtml)
	 * @property {Array} pickerData 当type为picker时，用户自定义设置picker的数据部分格式为：[{text:'', value:'', children:[]}]，设定该参数，则preType失效
	 * @event {Function($event)} change 当题目值发生改变时触发，传回：值，该题是否必填，该题ID
	 */
	export default{
		props:{
			defaultValue:{
				type:String,
				default:'',
			},
			id:{
				type:String,
				default:''
			},
			type:{
				type:String,
				default:'none'
			},
			showType:{
				type:Boolean,
				default:true,
			},
			autoIndex:{
				type:String,
				default:'none'
			},
			autoIndexFreshTime:{
				type:[String, Number],
				default:500,
			},
			title:{
				type:String,
				default:'unknown title'
			},
			titleColor:{
				type:String,
				default:'#027fff'
			},
			subTitle:{
				type:String,
				default:''
			},
			subTitleColor:{
				type:String,
				default:'#363636'
			},
			mustAnswer:{
				type:[Boolean, String],
				default:false
			},
			placeholder:{
				type:String,
				default:'请输入内容'
			},
			inputType:{
				type:String,
				default:'text'
			},
			maxlength:{
				type:Number,
				default:-1,
			},
			selectList:{
				type:Array,
				default:()=>{return [];}
			},
			maxSelect:{
				type:Number,
				default:1
			},
			hasOther:{
				type:Boolean,
				default:false,
			},
			float:{
				type:Boolean,
				default:false,
			},
			showReachMaxSelectMessage:{
				type:Boolean,
				default:false,
			},
			pickerType:{
				type:String,
				default:''
			},
			pickerData:{
				type:Array,
				default:()=>{return [];}
			}
		},
		model:{
			prop:'defaultValue',
			event:'v-model-change'
		},
		data(){
			return{
				myIndex: null,
				myid: null,
				value:null,
				otherValue:'',
				myParent:null,
				multiSelectResultList:[],
				myTypeLable:'',
				myLocalJSON:[],
				driveProvince:[
					'京','沪','浙','苏','粤','鲁','晋','冀','豫','川',
					'渝','辽','吉','黑','皖','鄂','津','贵','云','桂','琼',
					'青','新','藏','蒙','宁','甘','陕','闽','赣','湘'
				],
				selectDriveProvince:'',
			}
		},
		mounted() {
			var that = this;
			this.setID()
			this.getMyParent()
			setInterval(()=>{
				that.getMyIndex()
			}, that.autoIndexFreshTime);
			this.refreshMultiSelectResult();
			this.getMyTypeLable();
			this.getPretypeData();
			this.$nextTick(function(){
				this.defaultValueChange();
			})
		},
		methods:{
			getDriveProvince(){
				var res = [];
				for (var i=0;i<this.driveProvince.length;i++){
					res.push({text:this.driveProvince[i], value:i})
				}
				return res;
			},
			openDrivePopup(){
				this.$refs.driver_popup.open();
			},
			closeDrivePopup(){
				this.emitMyValue([this.driveProvince[this.selectDriveProvince],this.value])
				this.$refs.driver_popup.close();
			},
			getLocation(){
				uni.showLoading({
					title:'获取地理位置中'
				})
				uni.request({
					url:'http://ip-api.com/json/?lang=zh-CN',
					method:'GET',
					success:(res)=>{
						uni.hideLoading();
						//console.log(res);
						var locString=res.data.country+"-"+
							res.data.regionName+"-"+
							res.data.city;
						this.value = locString
						this.emitMyValue(res.data)
					},
					fail:(res)=>{
						uni.hideLoading()
						console.log(res)
					}
				})
			},
			getPretypeData(){
				if (this.type === 'picker'){
					if(typeof(this.pickerData) === 'object' && this.pickerData != null && this.pickerData.length > 0){
						this.myLocalJSON = this.pickerData;
					}
					else if (this.pickerType === 'province'){
						var theLocalJSON = require('./json/province.json');
						// console.log(theLocalJSON)
						this.myLocalJSON = [];
						for (var i in theLocalJSON['province']){
							this.myLocalJSON.push({
								text:i,
								value:i,
								children:[]})
							for (var j in theLocalJSON['province'][i]){
								this.myLocalJSON[this.myLocalJSON.length - 1]['children'].push({
									text:j,
									value:i+'-'+j,
									children:[]
								})
								for (var k=0;k<theLocalJSON['province'][i][j].length;k++){
									this.myLocalJSON[this.myLocalJSON.length - 1]['children'][
										this.myLocalJSON[this.myLocalJSON.length - 1]['children'].length - 1
									]['children'].push({
										text: theLocalJSON['province'][i][j][k],
										value: i+'-'+j+'-'+theLocalJSON['province'][i][j][k]
									})
								}
							}
						}
						// console.log(this.myLocalJSON)
					}
					else if (this.pickerType === 'country'){
						var theLocalJSON = require('./json/country.json');
						this.myLocalJSON = [];
						for(var i=0;i<theLocalJSON['country'].length;i++){
							this.myLocalJSON.push({
								text:theLocalJSON['country'][i]['name'],
								value:theLocalJSON['country'][i]})
						}
					}
					else if (this.pickerType === 'university'){
						var theLocalJSON = require('./json/university.json');
						this.myLocalJSON = [];
						for(var i=0;i<theLocalJSON['zone'].length;i++){
							this.myLocalJSON.push({
								text:theLocalJSON['zone'][i]['name'],
								value:theLocalJSON['zone'][i],
								children:[]
							})
							for (var j=0;j<theLocalJSON['university'].length;j++){
								if(theLocalJSON['university'][j]['zone'] === theLocalJSON['zone'][i].id)
								this.myLocalJSON[i]['children'].push({
									text:theLocalJSON['university'][j]['name'],
									value:theLocalJSON['university'][j]
								})
							}
						}
					}
					else if (this.pickerType === 'work'){
						var theLocalJSON = require('./json/work.json');
						this.myLocalJSON = [];
						for (var i in theLocalJSON['work']){
							this.myLocalJSON.push({
								text:i,
								value:i,
								children:[]})
							for (var j=0;j< theLocalJSON['work'][i].length;j++){
								this.myLocalJSON[this.myLocalJSON.length - 1]['children'].push({
									text:theLocalJSON['work'][i][j],
									value:i+'-'+theLocalJSON['work'][i][j]
								})
							}
						}
					}
					else if(this.pickerType === 'subjects'){
						this.myLocalJSON = require('./json/subjects.json');
					}
					return this.myLocalJSON;
				}
				return null;
			},
			refreshMultiSelectResult(){
				this.multiSelectResultList = []
				if(this.type === 'select' && this.maxSelect > 1){
					for (var i=0;i<this.selectList.length;i++){
						this.multiSelectResultList.push(false)
					}
					if (this.hasOther){
						this.multiSelectResultList.push(false)
					}
				}
			},
			multiSelectClick(itemIndex, isInputing=false){
				if(this.multiSelectResultList.length === 0){
					this.refreshMultiSelectResult()
				}
				if(itemIndex === -1){
					itemIndex = this.multiSelectResultList.length - 1;
				}
				var trueNum = 0;
				for (var i=0;i<this.multiSelectResultList.length;i++){
					if(this.multiSelectResultList[i]) trueNum++;
				}
				if(itemIndex === this.multiSelectResultList.length -1 && isInputing){
					if (trueNum < this.maxSelect && !this.multiSelectResultList[itemIndex]){
						this.multiSelectResultList[itemIndex] = true;
					}
				}
				else if(this.multiSelectResultList[itemIndex] === true || trueNum < this.maxSelect){
					this.multiSelectResultList[itemIndex] = !this.multiSelectResultList[itemIndex]
				}
				else if(this.showReachMaxSelectMessage){
					this.$refs.multiselect_popup.open()
				}
				this.value=[]
				for (var i=0;i<this.multiSelectResultList.length;i++){
					if(this.multiSelectResultList[i]){
						var theLable = i < this.selectList.length ? this.selectList[i]:this.otherValue;
						this.value.push({index:i, label:theLable})
					}
				}
				this.valueChange()
			},
			setID(){
				if(this.myid !== null){
					uni.removeStorageSync('gwh-wenjuan2-subject-'+this.myid)
				}
				if(typeof(this.id) === 'string' && this.id.length > 0){
					this.myid = this.id
				}
				else{
					this.myid = this.randomString()
				}
				
				// this.saveValue()
			},
			getMyParent(){
				var that = this;
				this.$nextTick(function(){
					that.myParent = that.$parent;
					that.getMyIndex();
				})
			},
			getMyIndex(){
				// console.log(this.autoIndex);
				if(this.myParent === null){
					return;
				}
				if(typeof(this.autoIndex) === 'string' && this.autoIndex != 'none'){
					// console.log(this.autoIndex);
					var that = this;
					var myParentQuery = uni.createSelectorQuery().in(that.myParent)
					myParentQuery.selectAll('.wenjuan').boundingClientRect(data=>{
						// console.log(data);
						var i = 0;
						for (;i<data.length;i++){
							if (data[i].id == that.myid){
								break;
							}
						}
						// console.log(i);
						if(i === 0 || that.autoIndex === 'new'){
							that.myIndex = '1.';
							return;
						}
						var lastIndex = data[i-1].dataset.index
						if(lastIndex === null){
							return;
						}
						var lastIndexList = lastIndex.split('.')
						if(that.autoIndex.indexOf('parent-') != -1){
							var n = parseInt(that.autoIndex.replace('parent-',''));
							if(n <= 0){
								// same
								lastIndexList[lastIndexList.length - 2] = parseInt(lastIndexList[lastIndexList.length - 2])+1;
								that.myIndex = lastIndexList.join('.');
								return;
							}
							if(n > lastIndex.length - 2){
								n = lastIndex.length - 2
							}
							lastIndexList[lastIndexList.length - 2 - n] = parseInt(lastIndexList[lastIndexList.length - 2 - n])+1;
							that.myIndex = ''
							for (var j=0;j<lastIndexList.length - 1 - n;j++){
								if (j>0){
									that.myIndex += '.'
								}
								that.myIndex += lastIndexList[j]
							}
							that.myIndex += '.'
							return;
						}
						switch(that.autoIndex){
							case 'parent':
								if(lastIndexList.length >= 3){
									lastIndexList[lastIndexList.length - 3] = parseInt(lastIndexList[lastIndexList.length - 3])+1; 
									that.myIndex = ''
									for (var j=0;j<lastIndexList.length - 2;j++){
										if (j>0){
											that.myIndex += '.'
										}
										this.myIndex += lastIndexList[j]
									}
									that.myIndex += '.'
									break;
								}
							case 'same': 
								lastIndexList[lastIndexList.length - 2] = parseInt(lastIndexList[lastIndexList.length - 2])+1;
								that.myIndex = lastIndexList.join('.');
								break;
							case 'child':
								that.myIndex = lastIndex + '1.';
								break;
						}
					}).exec()
				}
				else{
					this.myIndex = ''
				}
			},
			saveValue(){
				uni.setStorageSync('gwh-wenjuan2-subject-'+this.myid, {value:this.value, mustAnswer:this.isMustAnswer()})
			},
			randomString(length=16){
				var charRange = 'abcdefghijklmuopqrstuvwxyz0123456789';
				var str = "";
				for(var i=0;i<length;i++){
					str += charRange[parseInt(Math.random()*charRange.length)]
				}
				return str;
			},
			getMyTypeLable(){
				if (this.type === 'input'){
					this.myTypeLable = '填空'
				}
				else if(this.type === 'select'){
					if(this.maxSelect > 1){
						this.myTypeLable = '多选（至多'+this.maxSelect+'项）'
					}
					else{
						this.myTypeLable = '单选'
					}
				}
				else if(this.type === 'picker'){
					this.myTypeLable = '选择'
				}
			},
			isMustAnswer(){
				if ((typeof(this.mustAnswer) === 'boolean' && this.mustAnswer) || 
					(typeof(this.mustAnswer) === 'string' && (this.mustAnswer === 'true' || this.mustAnswer === 'True' || this.mustAnswer === '1'))){
					return true;
				}
				return false;
			},
			valueChange(e, setable=false){
				var that = this;
				if (setable) this.value = e;
				this.$nextTick(function(){
					that.$emit('change', {
						value: that.value,
						title: that.title,
						id: that.myid,
						index: that.myIndex,
						mustAnswer: that.mustAnswer
					});
					that.vmodelChange()
				})
			},
			stopInputNotNumORChar(e){
				let val = e.detail.value;
				var that = this;
				if (/[^a-zA-Z0-9]/g.test(val)) { // 先过滤不需要的字符，只保留数字和字母
					val = val.replace(/[^a-zA-Z0-9]/g, '');
				}
				if (!/^[A-Z\d]+$/.test(val)) {// 再进行转换，小写转为大写
					val = val.toUpperCase();
				}
				that.value = val;
				this.$nextTick(function(){
					that.emitMyValue([that.driveProvince[that.selectDriveProvince], that.value])
				})
			},
			emitMyValue(e){
				var that = this;
				this.$nextTick(function(){
					that.$emit('change', {
						value: e,
						title: that.title,
						id: that.myid,
						index: that.myIndex,
						mustAnswer: that.mustAnswer
					});
					that.vmodelChange()
				})
			},
			openCalender(){
				this.$refs.calender.open();
			},
			defaultValueChange(){
				if(this.type === 'input' && ['drive','location'].indexOf(this.inputType) < 0){
					this.value = this.defaultValue
					this.valueChange()
					this.$forceUpdate()
				}
			},
			vmodelChange(){
				if(this.type === 'input' && ['drive','location'].indexOf(this.inputType) < 0){
					this.$emit('v-model-change',this.value)
				}
			}
		},
		watch:{
			id(newValue){
				this.setID()
			},
			selectList(newValue){
				this.refreshMultiSelectResult()
			},
			type(newVal){
				this.getMyTypeLable()
				this.refreshMultiSelectResult()
				this.getPretypeData()
			},
			maxSelect(newVal){
				this.getMyTypeLable()
			},
			pickerType(newVal){
				this.getPretypeData()
			},
			defaultValue(newVal){
				this.defaultValueChange()
			},
		}
	}
</script>

<style scoped lang="scss">
	.wenjuan{
		display: flex;
		flex-direction: column;
		margin: 4px;
	}
	
	.subTitle{
		font-size: 35upx;
		margin-bottom: 15upx;
		padding-left: 15upx;
		padding-right: 10upx;
		word-break: break-all;
	}
	
	.subjectBody{
		margin-bottom: 15upx;
		padding-left: 15upx;
		padding-right: 10upx;
	}
	
	.placeInCol{
		display: flex;
		flex-direction: column;
	}
	
	.placeFloat{
		display: block;
	}
	
	.is-input-border {
		/* #ifndef APP-NVUE */
		display: flex;
		box-sizing: border-box;
		/* #endif */
		flex-direction: row;
		align-items: center;
		border: 1px solid $uni-border-color;
		border-radius: 4px;
	}
	
	.uni-easyinput__content {
		flex: 1;
		/* #ifndef APP-NVUE */
		width: 100%;
		display: flex;
		box-sizing: border-box;
		min-height: 36px;
		/* #endif */
		flex-direction: row;
		align-items: center;
	}
	
	.uni-easyinput__content-input {
		/* #ifndef APP-NVUE */
		width: auto;
		/* #endif */
		position: relative;
		overflow: hidden;
		flex: 1;
		line-height: 2;
		font-size: 14px;
	}
	
	.uni-popup-share {
		background-color: #fff;
	}
	.uni-share-title {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		align-items: center;
		justify-content: center;
		height: 40px;
	}
	.uni-share-title-text {
		font-size: 14px;
		color: #666;
	}
	.uni-share-content {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		justify-content: center;
		padding-top: 10px;
	}
	
	.uni-share-content-box {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		flex-wrap: wrap;
		width: 360px;
	}
	.uni-share-button-box {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		padding: 10px 15px;
	}
	
	.uni-share-button-close {
		flex: 1;
		width: 40%;
		border-radius: 50px;
		color: #fff;
		background-color: #007AFF;
		font-size: 16px;
		margin: 5px;
	}
	
	.uni-share-button-ok {
		flex: 1;
		width: 40%;
		border-radius: 50px;
		color: #fff;
		background-color: #DD524D;
		font-size: 16px;
		margin: 5px;
	}
	
</style>